<template>
  <a-card :bordered="false" style="height:calc(100vh - 180px)">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
            <a-form-item label="数据源名称">
              <a-input placeholder="请输入数据源名称" v-model="queryParam.dataSourceName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="数据源编码">
              <a-input placeholder="请输入数据源编码" v-model="queryParam.dataSourceCode"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">清除条件</a-button>
              <!-- <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a> -->
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <span slot="actionName">
          <a-button size="small" @click="handleAdd('新增数据源')" type="primary" icon="plus">配置</a-button>
        </span>
        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record, '编辑数据源')">修改</a>
          <a-divider type="vertical" />
          <a-popconfirm :title="`确定要删除吗?`" @confirm="handleTableDel(record)">
            <a>删除</a>
          </a-popconfirm>
        </span>
      </a-table>
    </div>
    <!-- table区域-end -->
    <CheckAndEditModel ref="modalForm" @ok="modalFormOk"></CheckAndEditModel>
  </a-card>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import CheckAndEditModel from './CheckAndEditModel'
import columns from './indexColumns'
import { postAction,httpAction } from '@/api/manage'

export default {
  name: 'sjzjgl',
  mixins: [JeecgListMixin],
  components: {
    CheckAndEditModel,
  },
  data() {
    return {
      queryParam: {},
      // 表头
      columns: columns(this),
      url: {
        list: '/dataSourceManage/dataSourcePage',
        delete: '/dataSourceManage/delDataSourceById',
      },
    }
  },
  created() {
    if (this.$route.params) {
      this.queryParam.unit = this.$route.params.unit
    }
  },
  methods: {
    handleTableDel(record) {
      httpAction(this.url.delete, { id: record.id }, 'delete').then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.loadData()
        } else {
          this.$message.error(res.message)
        }
      })
    },
  },
}
</script>

<style scoped>
@import '~@assets/less/common.less';
</style>